<template>
  <div class="child-manage">
    <div class="list">
      <div class="item"">
        {{info.txt}}
      </div>
      <div class="float-con clear">
        <div class="left">
          <p class="num">{{info.remain}} <span>次</span></p>
          <p class="text">当前剩余次数</p>
        </div>
        <div class="right">
          <p class="num">{{num}} <span>次</span></p>
          <p class="text">提交后剩余次数</p>
        </div>
        <img src="@/assets/mddk03.png" @click="jian" alt="">
      </div>
    </div>
    <span class="select">
      <selector v-model="teacher" title="老师" direction="rtl" :value-map="['id','truename']" :options="list1" @on-change="setTeacher()"></selector>
    </span>
    <span class="btn" @click="onsubmit()">提交</span>
    <p class="tip">点错了？<span @click="num = info.remain">点击重新编辑</span></p>
    <toast v-model="is_toast" type="text" width="20em">{{toast_con}}</toast>
  </div>
</template>

<script>
import {clockoperation,doclockoperation} from '@/api/api'
import { PopupPicker,Selector,Toast } from 'vux'
  export default {
    components: {
      PopupPicker,
      Toast,
      Selector,
    },
    data () {
      return {
        info:[],
        list1: [{key:1,value:'bb'},{key:2,value:'cc'}],
        teacher:'',
        num:0,
        is_toast:false,
        toast_con:'默认'
      }
    },
    created () {
      this.id = this.$route.query.id
      this.uid = this.$route.query.uid
      this.clock()
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      jian () {
        if(this.num <= 0){
          return
        }
        this.num--
      },
      clock(){
        clockoperation(this.id,this.uid).then((res) =>{
          this.list1=res.data.info.teacher
          this.info=res.data.info.info
          this.num=res.data.info.info.remain
        }).catch((err) => {
          console.dir(err)
        })
      },
      onsubmit(){
        if(this.info.remain==this.num){
          this.is_toast = !this.is_toast
          this.toast_con = '请选择扣除次数'
          return
        }
        if(this.teacher===true){
          this.is_toast = !this.is_toast
          this.toast_con = '请选择上课老师'
          return
        }
        let deduct=this.info.remain-this.num
        doclockoperation(this.id,this.uid,deduct,this.teacher).then((res) =>{
          if(res.data.status==1){
            this.router({path:'personDetails',query:{id:this.uid}})
          }else{
            this.is_toast = !this.is_toast
            this.toast_con=res.data.info
            return
          }
        }).catch((err) => {
          console.dir(err)
        })
      },
      setTeacher () {
        console.log(this.teacher)
      }
    }
  }
</script>

<style lang="stylus" scoped>
.child-manage
  min-height 100vh
  background-color #f5f5f5
  padding-bottom 6rem
  box-sizing border-box
  max-width 100vw
  overflow hidden
  .list
    padding 0 1.5rem
    background-color #fff
    .item
      position relative
      line-height 6rem
      height 6rem
      font-size 1.5rem
      color #333
      font-weight bold
      border-bottom 1px solid #e6e6e6
    .float-con
      position relative
      padding-top 1rem
      padding-bottom 1.2rem
      img
        position absolute
        width 7.5rem
        top 2.7rem
        left 50%
        margin-left -3.75rem
      .left
        float left
        text-align left
      .right 
        float right
        text-align right
      .num
        color #000
        font-size 3rem
        font-weight bold
        span
          color #333
          font-size 1.5rem
          font-weight 500
      .text
        color #999
        font-size 1.2rem
  .select
    margin-top 1rem
    line-height 5rem
    font-size 1.5rem
    color #202020
    background-color #fff
    display block
    padding 0 1.5rem
    position relative
    img
      position absolute
      width .6rem
      right 1.5rem
      top 2rem
  .btn
    margin-top 1rem
    display block
    width 92%
    margin-left 4%
    background-color #172F6D
    color #fff
    font-size 1.7rem
    font-weight 500
    text-align center
    line-height 5rem
    border-radius 100px
  .tip
    color #152D6F
    font-size 1.3rem
    text-align center
    display block
    margin-top 2.5rem
    line-height 1.3rem
    span
      text-decoration underline
</style>
